<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="renderer" content="webkit">

    <title> 检索银行信息</title>

    <link rel="shortcut icon" href="favicon.ico">
    <script type="text/javascript" src="/static/js/jquery.min.js"></script>
    <style>
        #banklist div{
            margin: 10px;
            border: 1px solid;
        }

    </style>
    <script>
        function resetMsg(){
            document.getElementById("banklist").innerHTML="";
            document.getElementById("createIndexMsg").innerHTML="";
            document.getElementById("deleteIndexMsg").innerHTML="";
            document.getElementById("searchMsg").innerHTML="";
        }
        function deleteIndex() {
            var url = '/bank/deleteIndex';
            $.ajax({
                url: url,
                cache: false,
                contentType: false,
                type: "GET",
                async: true, //是否是异步
                success: function (data) {
                    if(!data || !data.costTime){
                        alert("索引删除失败")
                        return ;
                    }
                    var costTime=data.costTime;
                    var index_dir=data.index_dir;
                    resetMsg();
                    document.getElementById("deleteIndexMsg").innerHTML="删除耗时："+costTime+"ms,索引目录："+index_dir;
                },
                error: function (data, status, e) {
                    console.log(e);
                }
            });
        }
        function createIndex() {
            var url = '/bank/createIndex';
            $.ajax({
                url: url,
                cache: false,
                contentType: false,
                type: "GET",
                async: true, //是否是异步
                success: function (data) {
                    if(!data || !data.costTime){
                        alert("索引创建失败")
                        return ;
                    }
                    var costTime=data.costTime;
                    var total=data.total;
                    var index_dir=data.index_dir;
                    resetMsg();
                    document.getElementById("createIndexMsg").innerHTML="查询耗时："+costTime+"ms,数据量"+total+"条，索引目录："+index_dir;
                },
                error: function (data, status, e) {
                    console.log(e);
                }
            });
        }
        function searchBox() {
            var val = $("#searchValue").val();
            console.log("输入参数：" + val);
            var url = '/bank/search?text=' + val;
            $.ajax({
                url: url,
                cache: false,
                contentType: false,
                type: "GET",
                async: true, //是否是异步
                success: function (data) {
                    if(!data || !data.list || data.list.length<=0){
                        alert("未找到相关的数据")
                        return ;
                    }
                    var list=data.list;
                    var costTime=data.costTime;
                    resetMsg();
                    document.getElementById("searchMsg").innerHTML="查询耗时："+costTime+"ms";

                    for(var i=0;i<list.length;i++){
                        var oDiv=document.createElement("div");
                        document.getElementById("banklist").appendChild(oDiv);
                        oDiv.innerHTML="银行编号:"+list[i].bankNo+"银行名称:"+list[i].bankName;
                    }
                },
                error: function (data, status, e) {
                    console.log(e);
                }
            });
        }
    </script>
</head>

<body>
<div>
    当前索引中文档中数量<span th:utext="${total}"></span>
</div>
<div>
    <input id="createIndexBox" onclick="createIndex()" value="创建索引" type="button">
    <span id="createIndexMsg"></span>
</div>
<div>
    <input id="deleteIndexBox" onclick="deleteIndex()" value="删除索引" type="button">
    <span id="deleteIndexMsg"></span>
</div>
    <div>
        请输入银行名称<input id="searchValue" onChange="searchBox()" type="text"> <input id="searchBox" onclick="searchBox()"
                                                                                  value="搜索" type="button">
        <span id="searchMsg"></span>
    </div>
    <div id="banklist">
<!--        <div  th:each="list: ${list}">-->

<!--            银行编号:-->
<!--            <span th:utext="${list.bankNo}">-->
<!--                1-->
<!--            </span>-->

<!--            银行名称:-->
<!--            <span th:utext="${list.bankName}">-->
<!--                2-->
<!--            </span>-->
<!--        </div>-->
    </div>
</body>

</html>
